<script setup lang="ts">
import { computed } from "vue";
import { AssetFileType } from "@/views/domain/assets/api/assetsFile";
import { AssetsItem, PanLayout } from "./provider";
import FileIcon from "@/components/FileIcon/index.vue";
import MediaPreview from "@/components/MediaPreview/index.vue";

const props = defineProps<{
  asset: AssetsItem;
  layout?: PanLayout;
}>();

const emit = defineEmits(["click"]);

const handleClick = () => {
  emit("click", props.asset);
};

const getAssetExt = () => {
  return props.asset.file?.ext || "";
};

const getModTime = () => {
  if (props.asset.isDir()) {
    return props.asset.dir.createdAt;
  } else {
    return props.asset.file?.modTime;
  }
};

const getAssetSize = () => {
  const size = props.asset.file?.size || 0;
  if (size > 1024 * 1024 * 1024) {
    return (size / (1024 * 1024 * 1024)).toFixed(2) + " GB";
  } else if (size > 1024 * 1024) {
    return (size / (1024 * 1024)).toFixed(2) + " MB";
  } else if (size > 1024) {
    return (size / 1024).toFixed(2) + " KB";
  } else {
    return size + " B";
  }
};

const file = computed(() => {
  return props.asset.file;
});
const getThumbImgUrl = () => {
  const source = file.value?.thumbFile?.source || "";
  switch (file.value.fileType) {
    case AssetFileType.Video:
      return `/api/v1/assets/file/vd_thumb/${source}`;
    case AssetFileType.Image:
      return `/api/v1/assets/file/img_thumb/${source}`;
  }

  return "";
};

const getLayoutWrap = computed(() => {
  switch (props.layout) {
    case PanLayout.Grid:
      return "grid-wrap";
    default:
      return "list-wrap";
  }
});
</script>

<template>
  <div class="asset-item" @click="handleClick">
    <div :class="getLayoutWrap">
      <div class="asset-icon">
        <FileIcon v-if="props.asset.isDir()" ext="folder" size="40" />
        <FileIcon
          v-else
          :ext="getAssetExt()"
          size="40"
          show-if-image
          :source="getThumbImgUrl()"
        >
          <template #preview>
            <MediaPreview :images="[getThumbImgUrl()]" />
          </template>
        </FileIcon>
      </div>

      <el-text class="asset-label" truncated>
        {{ props.asset.getTitle() }}
      </el-text>
      <div style="flex: 1" />
      <div v-if="layout === PanLayout.List" class="asset-ext">
        <el-text v-if="!asset.isDir()" type="primary" size="small">
          {{ getAssetSize() }}
        </el-text>

        <el-text size="small">
          {{ getModTime() }}
        </el-text>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.asset-item {
  min-width: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.grid-wrap {
  width: 100%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

  .asset-icon {
    height: 60%;
    .file-icon {
      height: 100%;
      justify-content: center;
    }
  }

  .asset-label {
    height: 20%;
  }
}

.list-wrap {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  // justify-content: space-between;
  align-items: center;

  .asset-icon {
    // height: 100%;
    .file-icon {
      height: 100%;
      width: 30px;
      justify-content: center;
    }
  }

  .asset-label {
    // height: 100%;
    margin-left: 10px;
  }
}

.asset-ext {
  display: flex;
  gap: 8px;
}

.asset-item:hover {
  background-color: var(--el-color-primary-light-6);
  border-radius: 4px;
  overflow: hidden;
}
</style>
